<template>
  <div class="video-container pxy20">
    <el-row>
      <ElCol :span="4">
        <ElInput v-model="listQuery.title" placeholder="请输入课程标题搜索" clearable @keyup.enter.native="searchVideo">
          <el-button slot="append" icon="el-icon-search" @click="searchVideo" />
        </ElInput>
      </ElCol>
      <ElCol :span="4" :offset="1">
        <el-select v-model="listQuery.type" placeholder="请选择视频类型" clearable @change="getList">
          <el-option v-for="item,i in tagList" :key="i" :label="item.label" :value="item.value" />
        </el-select>
      </ElCol>
      <el-col :span="2" :offset="12">
        <el-button type="primary" @click="addVideo">新增视频</el-button>
      </el-col>
    </el-row>
    <ElTable v-loading="load" :data="list" border>
      <ElTableColumn label="序号" type="index" align="center" width="60" />
      <ElTableColumn label="视频ID" prop="id" align="center" />
      <ElTableColumn label="课程名称" prop="title" align="center" />
      <ElTableColumn label="课程描述" prop="summary" align="center" />
      <ElTableColumn label="学生背景" prop="studentBackground" align="center" />
      <ElTableColumn label="是否设置推荐位" prop="isRecommended" align="center" width="140">
        <template slot-scope="{ row }">
          {{ row.isRecommended ? '是' : '否' }}
        </template>
      </ElTableColumn>
      <ElTableColumn label="是否设置Banner位" prop="isBanner" align="center" width="140">
        <template slot-scope="{ row }">
          {{ row.isBanner ? '是' : '否' }}
        </template>
      </ElTableColumn>
      <ElTableColumn label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button type="primary" icon="el-icon-edit" @click="editVideo(row)">编辑</el-button>

          <el-popconfirm title="确定删除这个视频吗？" @confirm="delVideo(row)">
            <el-button slot="reference" style="margin-left: 5px" type="danger" icon="el-icon-delete">删除</el-button>
          </el-popconfirm>
        </template>
      </ElTableColumn>
    </ElTable>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { VIDEO_DEL, GET_VIDEO_LIST } from '@/api/manage/video'
export default {
  name: 'Video',
  components: {
    Pagination
  },
  data() {
    return {
      total: 0,
      listQuery: {
        page: 1,
        size: 10,
        title: '',
        type: ''
      },
      list: [],
      load: false,
      tagList: [
        {
          label: '留学前课程',
          value: '1'
        },
        {
          label: '留学后课程',
          value: '2'
        }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      // 获取视频列表
      this.load = true
      GET_VIDEO_LIST(this.listQuery).then((res) => {
        const { total, rows } = res.data
        this.list = rows
        this.total = total
        this.load = false
      })
    },
    searchVideo() {
      this.listQuery.type = ''
      this.getList()
    },
    // 增加视频
    addVideo() {
      this.$router.push({ path: '/manage/videoEdit' })
    },
    editVideo(row) {
      this.$router.push({ name: 'videoEdit', params: row })
    },
    // 删除视频
    delVideo(row) {
      const ids = row.id
      VIDEO_DEL({ ids }).then((res) => {
        const i = res['result'] === 0
        this.$message({
          message: i ? '删除成功！' : '删除失败!' + res.msg,
          type: i ? 'success' : 'error'
        })
        i ? this.getList() : ''
      })
    }
  }
}
</script>

<style lang="scss" scoped>
 ::v-deep .el-table {
   margin-top: 20px;
 }
</style>
